<template>
	<view class="main">
		<u-navbar :is-back="true" title="测试题目" :background="background" :border-bottom="false" title-color="#000000"
			back-icon-color="#000"></u-navbar>
		<view class="isnone" v-if="list.length<1">
			<u-empty text="该课程暂无试题" mode="data"></u-empty>
		</view>
		<view class="all" v-for="(item,index) in list " :key="index" v-if="index==page">
			<view class="test">
				<view class="title">
					{{index+1}}.{{item.title}}{{item.status==1?'(单选)':'(多选)'}}
				</view>
				<view class="options">
					<view v-for="(content,id) in item.content " :key="id"
						:class="item.status==1?          checkeds==id?'option':'option1'                     :content.checked?'option':'option1'"
						@click="item.status==1?checked(id,content.num):movechecked(index,id,content)">
						<text v-if="content.option!=null">{{content.num}}</text><text class="option_tit"
							v-if="content.option!=null">{{content.option}}</text>
					</view>
					<!-- 					<view v-for="(content,id) in item.content " :key="id" class='option2' v-if="item.checked">
						<view class="test_l">
							<text v-if="content.num==0">A</text>
							<text v-if="content.num==1">B</text>
							<text v-if="content.num==2">C</text>
							<text v-if="content.num==3">D</text><text class="option_tit">{{content.option}}</text>
						</view>
						<view class="test_r">
							<image src="../../../static/images/dui.png" mode="aspectFit"></image>
						</view>
					</view> -->
				</view>
			</view>
			<view class="button">
				<view class="but_l" @click="previous(index)">
					上一题
				</view>
				<view class="but_r" @click="next(index,item.id)" v-if="page<list.length-1">
					下一题
				</view>
				<view class="but_r" v-if="page==list.length-1" @click="submit(index )">
					提交答案
				</view>
			</view>
		</view>

		<view class="move" @click="move" v-if="list.length>0">
			<image src="../../../static/images/move.png" mode=""></image>
		</view>
		<u-popup v-model="show" mode="center" border-radius="40">
			<view class="checkes">
				<view class="test_tit">
					题目列表
				</view>
				<view class="number">
					<view :class="index==testid?'one_of1':'one_of'" v-for="(item,index) in list.length" :key="index"
						@click="select(index)">
						<text>{{index}}</text>
					</view>
				</view>
			</view>
		</u-popup>
		<u-popup v-model="score" mode="center" border-radius="40" width="588" height="490">
			<view class="score">
				<view class="score_tit">
					答题成绩
				</view>
				<view class="small_tit">
					得分
				</view>
				<view class="nums">
					{{scores}}
				</view>
				<view class="times">
					答题时间：<text>{{times}}</text>
				</view>
				<view class="hidden" @click="hidden">
					确定
				</view>

			</view>
		</u-popup>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#FFFFFF',
				},
				topic: '',
				show: false,
				checkeds: null,
				index: 0,
				page: 0,
				testid: 0,
				seleted: [],
				content: '',
				nums: '',
				score: false,
				scores: '',
				times: '',
				list: [
					// //多选
					// {
					// 	title: '2.美羊羊的追求者是谁', //题目标题
					// 	status: '2', //是单选还是多选  1  单选   2  多选
					// 	succes: ['2', '3'],
					// 	content: [{
					// 			num: '0', //0A 1B 2C  3D
					// 			option: '灰太狼', //选项名称
					// 			checked: false, //多选根据 true/false 判断是否选中   单选可以没有 这个属性值 
					// 		},
					// 		{
					// 			num: '1',
					// 			option: '喜洋洋',
					// 			checked: false,
					// 		},
					// 		{
					// 			num: '2',
					// 			option: '你',
					// 			checked: false,
					// 		},
					// 		{
					// 			num: '3',
					// 			option: '沸羊羊',
					// 			checked: false,
					// 		}
					// 	]
					// },
				],

			}
		},
		onShow() {
			// this.nums=0

		},
		onLoad(options) {
			console.log(options);
			this.topic = options.id
			this.gettest()
			this.time()
		},
		methods: {
			hidden() {
				this.score = false
			},
			time() {
				var second;
				second = 0; //初始化
				setInterval(() => {
					second = second + 1;
					this.nums = second;
				}, 1000);
			},
			submit(index) {
				this.list[index].success = this.content
				this.list[index].value = this.checkeds
				global.$http.request({
					url: '/api/home/submit',
					data: {
						token: uni.getStorageSync('token'),
						content: this.list,
						end_time: this.nums
					}
				}).then(res => {
					if (res.data.code == 200) {
						this.score = true
						this.scores = res.data.data.fs
						this.times = res.data.data.end
					}
				})
			},
			gettest() {
				global.$http.request({
					url: '/api/home/questions',
					data: {
						token: uni.getStorageSync('token'),
						id: this.topic
					}
				}).then(res => {
					if (res.data.code == 200) {
						console.log(res.data.data);
						this.list = res.data.data
					}
				})
			},
			move() {
				this.show = true
			},
			select(index) {
				this.testid = index
				this.page = index
				this.show = false
			},
			//单选
			checked(index, num) {

				this.checkeds = index //选项
				this.content = num //内容

			},
			//多选
			movechecked(index, id, son) {
				// console.log(father);
				// console.log(id);
				// console.log(son);
				this.list[index].content[id].checked = !this.list[index].content[id].checked
			},
			previous(index) {
				// console.log(this.page);
				if (this.page <= 0) {
					uni.showToast({
						title: '前边没有题了！',
						icon: 'none',
						duration: 700
					})
				} else {
					this.checkeds = this.list[index - 1].value
					this.page = this.page - 1
					this.testid = this.testid - 1
				}
			},
			next(index, sonindex) {

				if (this.page > this.list.length - 2) {
					uni.showToast({
						title: '最后一题！',
						icon: 'none',
						duration: 700
					})
				} else {
					this.page = this.page + 1 //下一题
					this.testid = this.testid + 1 //选择器
					this.list[index].success = this.content
					this.list[index].value = this.checkeds
				}
				this.checkeds = null
			}


		}
	}
</script>

<style lang="scss">
	page {
		width: 750rpx;
		height: 100%;
		font-family: PingFang SC;
		background-color: #F7F7F7;

		.main {

			// display: flex;
			// flex-direction: column;
			// align-items: center;
			.isnone {
				padding-top: 370rpx;
			}

			.all {
				width: 720rpx;
				margin: 0 auto;

				.test {
					width: 720rpx;
					border-radius: 20rpx;
					background-color: #fff;
					padding: 67rpx 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;

					.title {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
						margin-bottom: 84rpx;
					}

					.options {
						width: 680rpx;
						background: #F2F2F2;

						.option {
							padding: 34rpx 64rpx 34rpx 42rpx;
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #11D1A8;
							display: flex;
							align-items: center;

							text {
								display: block;
								padding-right: 37rpx;
							}

						}

						.option2 {
							padding: 34rpx 64rpx 34rpx 42rpx;
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #11D1A8;
							display: flex;
							align-items: center;
							justify-content: space-between;

							text {
								display: block;
								padding-right: 37rpx;
							}

							.test_l {
								display: flex;
								color: #005AFF;
							}

							.test_r {
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						.option3 {
							padding: 34rpx 64rpx 34rpx 42rpx;
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #11D1A8;
							display: flex;
							align-items: center;
							justify-content: space-between;

							text {
								display: block;
								padding-right: 37rpx;
							}

							.test_l {
								display: flex;
								color: #005AFF;
							}

							.test_r {
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}

						.option1 {
							padding: 34rpx 64rpx 34rpx 42rpx;
							font-size: 34rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #000000;
							display: flex;
							align-items: center;

							text {
								display: block;
								padding-right: 37rpx;
							}

							.test_l {
								display: flex;
							}

							.test_r {
								image {
									width: 40rpx;
									height: 40rpx;
								}
							}
						}
					}
				}

				.button {
					width: 750rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 54rpx 30rpx;

					.but_l {
						width: 320rpx;
						height: 96rpx;
						background: #11D1A8;
						border-radius: 20rpx;
						text-align: center;
						line-height: 96rpx;


						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #FFFFFF;
					}

					.but_r {
						width: 320rpx;
						height: 96rpx;
						background: #E6E6E6;
						border-radius: 20rpx;
						text-align: center;
						line-height: 96rpx;

						font-size: 34rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #000000;
					}
				}
			}



			.move {
				padding: 83rpx 29rpx 0 0;
				display: flex;
				justify-content: flex-end;

				image {
					width: 132rpx;
					height: 132rpx;
				}
			}

			.checkes {
				padding: 45rpx 10rpx 96rpx 30rpx;
				width: 660rpx;
				height: 600rpx;
				background: #FFFFFF;
				border-radius: 40rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.test_tit {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #000000;
					padding-bottom: 57rpx;

				}

				.number {
					display: flex;
					flex-wrap: wrap;
					font-size: 40rpx;
					font-family: PingFang SC;
					font-weight: bold;


					.one_of {
						margin: 0 20rpx 20rpx 0;
						width: 104rpx;
						height: 104rpx;
						line-height: 104rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1rpx solid #999999;
						border-radius: 50%;
						color: #000000;
					}

					.one_of1 {
						margin: 0 20rpx 20rpx 0;
						width: 104rpx;
						height: 104rpx;
						line-height: 104rpx;
						text-align: center;
						background: #11D1A8;
						color: #fff;
						border: 1rpx solid #999999;
						border-radius: 50%;
					}

				}
			}

			.score {
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 40rpx 0 40rpx 0;

				.score_tit {
					font-size: 34rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #000000;
				}

				.small_tit {
					padding-top: 57rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;
				}

				.nums {
					padding-top: 25rpx;
					font-size: 46rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FF0000;
				}

				.times {
					padding-top: 53rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #666666;

					text {
						color: #FF0000;
					}
				}

				.hidden {
					margin-top: 37rpx;
					width: 160rpx;
					height: 64rpx;
					background: #11D1A8;
					border-radius: 32rpx;
					text-align: center;
					line-height: 64rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;

				}
			}
		}
	}
</style>
